//
// Project bar
// -----------------------------------------------
@desktop-search-width: 300px;

.project-bar {
  background-color: @project-bar-bg;
  border-bottom: 1px solid @project-bar-border-color;
  display: flex;
  height: @project-bar-height-mobile;
  left: 0;
  position: fixed;
  right: 0;
  top: @navbar-os-header-height-mobile;
  z-index: @zindex-navbar-fixed - 1; // one less than navbar
  @media (min-width: @screen-sm-min) {
    height: @project-bar-height-desktop;
    top: @navbar-os-header-height-desktop;
  }
  .add-to-project {
    align-items: center;
    color: @navbar-pf-vertical-color;
    justify-content: center;
    margin: 0 5px 0 0;
    @media (min-width: @screen-sm-min) {
      margin: 7px 10px 0 5px;
    }
    > .btn-link {
      align-items: center;
      color: @navbar-os-project-menu-color;
      display: flex;
      flex: 1 1 auto;
      font-weight: 300;
      justify-content: center;

      @media (min-width: @screen-sm-min) {
        background-color: @color-pf-black-900;
        border: 1px solid @navbar-pf-bg-color;
      }
      &:active,
      &:focus,
      &:hover {
        color: #fff;
        text-decoration: none;
      }
      > i {
        padding: 4px 5px;
      }
    }
    .caret {
      padding-left: 18px;
    }
    .dropdown-menu {
      margin-top: 0; // align top edge to project bar bottom
      right: -2px;
      @media (min-width: @screen-sm-min) {
        right: -1px;
      }
      &:after {
        border: 6px solid transparent;
        border-bottom-color: #fff;
        border-top-width: 0;
        content: "";
        display: block;
        height: 0;
        position: absolute;
        right: 10px;
        top: -6px;
        vertical-align: middle;
        width: 0;
      }
    }
  }
  .bootstrap-select.btn-group {
    height: auto;
    @media(min-width: @screen-sm-min) {
      max-width: 100%;
      min-width: 200px;
      width: auto;
    }
    @media(min-width: @screen-lg-min) {
      max-width: 60%;
    }
    .btn {
      background: transparent;
      border-bottom: 0;
      border-color: @project-bar-border-color;
      border-left-width: 0;
      border-radius: 0;
      border-top: 0;
      box-shadow: none;
      color: @navbar-os-project-menu-color;
      font-size: @font-size-large;
      font-weight: 300;
      line-height: @line-height-base;
      padding: 1px 40px 1px 15px; // padding so truncated name with ellipsis doesn't extend into down icon
      transition: none;
      @media (min-width: @screen-sm-min) {
        font-size: @font-size-large + 4; // 18px
        padding: 4px 40px 4px 20px;
      }
      @media(min-width: @screen-sm-min) {
        &:after {
          content: '';
          background: @navbar-os-project-menu-border-inset;
          display: block;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 1px;
        }
      }
      &:hover, &:focus {
        background-color: @navbar-os-project-menu-active-bg;
        color: @navbar-os-project-menu-active-color;
      }
      &:focus {
        .tab-focus();
        &:active {
          outline: none !important;
        }
      }
      .filter-option {
        .truncate();
      }
    }
    &.open {
      .btn {
        background-color: @navbar-os-project-menu-active-bg;
      }
    }
    .dropdown-toggle {
      &.btn-default {
        border-right-width: 1px;
        height: (@project-bar-height-mobile - 1);
        @media(min-width: @screen-sm-min) {
          border-left-width: 1px;
          border-right: 0;
          height: (@project-bar-height-desktop - 1);
        }
      }
      .caret {
        font-size: @font-size-base;
        margin-top: -5px;
        position: absolute;
        right: 15px;
        top: 50%;
      }
    }
    .dropdown-menu {
      background-color: @navbar-os-project-menu-active-bg;
      border-color: @navbar-os-project-menu-border-color;
      border-radius: 0;
      color: @navbar-os-project-menu-color;
      margin-top: 0;
      padding: 0;
      li {
        background-color: @navbar-os-project-menu-active-bg;
        &.selected a {
          background-color: @navbar-os-project-menu-hover-bg !important;
          border-color: transparent !important;
          color: @navbar-os-project-menu-active-color;
          &:after {
            content: '';
            width: 2px;
            height: 100%;
            left:0;
            top:0;
            display: block;
            position: absolute;
            background-color: @navbar-os-project-menu-active-bar;
          }
        }
        &.divider {
          border-top: 1px solid @project-bar-bg;
          height: 1px;
          margin: 0 !important;
        }
        &:last-child > a { // "View all projects"
          color: @color-pf-blue-300 !important;
        }
        a {
          color: @navbar-os-project-menu-color;
          font-weight: 300;
          padding: 3px 5px 3px 16px;
          @media(min-width: @screen-sm-min) {
            padding: 8px 20px;
          }
          white-space: normal;
          &:hover, &:focus {
            background-color: @navbar-os-project-menu-hover-bg;
            border-color: transparent;
            color: @navbar-os-project-menu-active-color;
          }
          @media (max-width: @screen-xs-max) {
            span.text {
              .word-break-all();
            }
          }
        }
      }
    }
  }

  .catalog-search {
    background: transparent;
    border: 0;
    margin-left: 15px;
    padding: 5px 0;
    position: relative;
    width: inherit;
    @media (min-width: @screen-sm-min) {
      padding-top: 7px;
      position: inherit;
    }
    @media (max-width: @screen-xs-max) {
      border-right: 1px solid @navbar-pf-bg-color;
      margin-left: 0;
      padding: 2px 5px;
      &.mobile-shown {
        background: @nav-pf-vertical-bg-color;
        padding-bottom: 10px;
      }
    }
    .catalog-search-icon {
      left: 5px;
      top: 4px;
    }
    .catalog-search-input {
      text-indent: 20px;
    }
    .catalog-search-toggle {
      color: @navbar-os-project-menu-color;
      &:active,
      &:focus,
      &:hover {
        color: #fff;
        text-decoration: none;
      }
      &:focus {
        .tab-focus();
      }
    }
    .dropdown-menu {
      @media (min-width: @screen-sm-min) {
        left: auto !important;
        right: 0;
        width: @desktop-search-width;
      }
    }
    .landing-search-form {
      width: @desktop-search-width;
      .search-pf-input-group {
        button {
          color: @navbar-os-project-menu-color;
        }
        .form-control {
          background-color: @color-pf-black-900;
          border-color: @navbar-pf-bg-color;
          color: @navbar-os-project-menu-color;
          &:focus {
            .tab-focus();
          }
        }
        .pficon-close {
          font-size: (@font-size-base + 2);
        }
      }
    }
    &.mobile-shown {
      .catalog-search-toggle {
        color: @color-pf-blue-300;
        padding: 0 5px;
        &:active,
        &:focus,
        &:hover {
          color: @color-pf-blue-300;
        }
      }
      .landing-search-form {
        @media (max-width: @screen-xs-max) {
          background-color: @nav-pf-vertical-bg-color;
          display: block !important;
          left: 0;
          padding: 10px;
          position: fixed;
          right: 0;
          top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
          width: auto;
          .form-group {
            display: block;
          }
        }
      }
    }
  }
  .form-group {
    flex: 1 0 0%;
    margin-bottom: 0;
    min-width: 0; // so that truncation on .filter-option works
    .form-control {
      background-color: transparent;
    }
  }
  .navbar-toggle {
    border: 0;
    display: block;
    float: left;
    margin: 0 10px;
    padding: 12px 16px; // match width of collapsed vertical-nav
    @media(max-width: @screen-xs-max) {
      display: none;
    }
    &:hover,
    &:focus {
      .icon-bar {
        background: @navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg;
      }
    }
    .icon-bar {
      background-color: @navbar-pf-vertical-color;
    }
  }
}
